<template>
  <div class="navigation-bar">
    {{title}}
    <van-icon name="arrow-left" class="back" @click="$router.back()" />
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon } from 'vant'
Vue.use(Icon)

export default {
  name: 'NavigationBar',
  data () {
    return {
      title: ''
    }
  },
  watch: {
    $route: {
      handler: function (newRoute) {
        this.title = newRoute.meta && newRoute.meta.title
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .navigation-bar {
    text-align: center;
    height: 30px;
    line-height: 30px;
    background: #666;
    color: #fff;
    position: relative;
  }
  .back{
    color: red;
    position: absolute;
    top: 1px;
    left: 5px;
  }
</style>
